<template>
  <div class="accountList">
    <el-form :model="addEditForm" :rules="addEditRules" ref="addEditFormRef">
      <div class="essential">
        <div class="essential-title">基本信息</div>
        <div style="margin-left: 20px">
          <el-row>
            <el-col :span="12">
              <el-form-item prop="name" label="中文名称：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    v-model="addEditForm.name"
                    placeholder="请输入中文名称"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="inci" label="INCI/英文名称：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    v-model="addEditForm.inci"
                    placeholder="请输入INCI/英文名称"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item prop="ecWrap" label="EC：">
            <div class="item">
              <div
                v-for="(item, index) in addEditForm.ecWrap"
                :key="index"
                style="
                  margin-right: 10px;
                  display: inline-block;
                  position: relative;
                "
              >
                <el-input
                  clearable
                  style="width: 150px"
                  size="mini"
                  v-model="addEditForm.ecWrap[index]"
                  placeholder="请输入EC号"
                >
                </el-input>
                <i
                  class="el-icon-circle-close"
                  style="
                    color: #8f8f8f;
                    font-size: 18px;
                    position: absolute;
                    right: -8px;
                  "
                  @click="deleteEcWrap(index)"
                ></i>
              </div>
              <i
                @click="addEc"
                class="el-icon-circle-plus-outline"
                style="
                  cursor: pointer;
                  font-size: 26px;
                  color: #0099cc;
                  font-weight: bold;
                  vertical-align: sub;
                "
              ></i>
            </div>
          </el-form-item>

          <el-form-item prop="CAS" label="CAS：">
            <div class="item">
              <div
                v-for="(item, index) in addEditForm.casWrap"
                :key="index"
                style="
                  margin-right: 10px;
                  display: inline-block;
                  position: relative;
                "
              >
                <el-input
                  clearable
                  style="width: 150px"
                  size="mini"
                  v-model="addEditForm.casWrap[index]"
                  placeholder="请输入CAS号"
                >
                </el-input>
                <i
                  class="el-icon-circle-close"
                  style="
                    color: #8f8f8f;
                    font-size: 18px;
                    position: absolute;
                    right: -8px;
                  "
                  @click="deleteCasWrap(index)"
                ></i>
              </div>
              <i
                @click="addCas"
                class="el-icon-circle-plus-outline"
                style="
                  cursor: pointer;
                  font-size: 26px;
                  color: #0099cc;
                  font-weight: bold;
                  vertical-align: sub;
                "
              ></i>
            </div>
          </el-form-item>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="effectWrap" label="作用目的：">
                <div class="item">
                  <el-select filterable 
                    filterable
                    style="width: 100%"
                    clearable
                    multiple
                    v-model="addEditForm.effectWrap"
                    placeholder="请选择作用目的"
                    size="mini"
                  >
                    <el-option
                      v-for="item in dictList.effective_purpose"
                      :key="item.v"
                      :label="item.v"
                      :value="item.k"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="suggestItem" label="建议加测项：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model="addEditForm.suggestItem"
                    placeholder="请输入建议加测项"
                  >
                  </el-input>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="disabled" label="是否为化妆品禁用组分：">
                <div class="item">
                  <el-select filterable 
                    style="width: 400px"
                    clearable
                    v-model="addEditForm.disabled"
                    placeholder="请选择作用目的"
                    size="mini"
                  >
                    <el-option
                      v-for="item in disabledOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item> </el-col
          ></el-row>
        </div>
      </div>
      <div class="essential">
        <div class="essential-title">风险物质</div>
        <div style="margin-left: 20px">
          <div v-for="(item, index) in addEditForm.substances" :key="index">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="value" label="可能含有的风险物质：">
                  <div class="item">
                    <el-input
                      style="width: 100%"
                      size="mini"
                      clearable
                      v-model.trim="item.value"
                      placeholder="请输入可能含有的风险物质"
                    >
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item prop="remark" label="风险物质备注：">
                  <div class="item">
                    <el-input
                      style="width: 100%"
                      size="mini"
                      clearable
                      v-model.trim="item.remark"
                      placeholder="请输入风险物质备注"
                    >
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align: center">
                <i
                  v-if="addEditForm.substances.length > 1"
                  @click="delFx(index)"
                  class="el-icon-remove-outline"
                  style="
                    cursor: pointer;
                    font-size: 26px;
                    color: red;
                    font-weight: bold;
                    margin-top: 45px;
                  "
                ></i>
              </el-col>
            </el-row>
          </div>
          <i
            @click="addFx"
            class="el-icon-circle-plus-outline"
            style="
              cursor: pointer;
              font-size: 26px;
              color: #0099cc;
              font-weight: bold;
              margin-top: 10px;
            "
          ></i>
        </div>
      </div>
      <div class="essential">
        <div class="essential-title">已使用化妆品原料目录</div>
        <div style="margin-left: 20px">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="num" label="目录序号：">
                <div class="item">
                  <el-input
                    type="number"
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.num"
                    placeholder="请输入目录序号"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="lxMaxUseCount"
                label="淋洗类产品最高历史使用量(%)："
              >
                <div class="item">
                  <el-input
                   @input="handleInput1(addEditForm.lxMaxUseCount,'addEditForm','lxMaxUseCount')"
                    type="number"
                    style="width: 100%; margin-top: 5px"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.lxMaxUseCount"
                    placeholder="请输入淋洗类产品最高历史使用量"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="zlMaxUseCount"
                label="驻留类产品最高历史使用量(%)："
              >
                <div class="item">
                  <el-input
                   @input="handleInput1(addEditForm.zlMaxUseCount,'addEditForm','zlMaxUseCount')"
                    type="number"
                    style="width: 100%; margin-top: 5px"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.zlMaxUseCount"
                    placeholder="请输入驻留类产品最高历史使用量"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="remark" label="目录备注：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.remark"
                    placeholder="请输入目录备注"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="essential">
        <div class="essential-title">已上市产品原料使用信息</div>
        <div style="margin-left: 20px">
          <div
            v-for="(item, index) in addEditForm.ingredientUseInfoList"
            :key="index"
          >
            <el-row>
              <el-col :span="4">
                <el-form-item prop="position" label="作用部位：">
                  <div class="item">
                    <el-select filterable 
                      clearable
                      v-model="item.position"
                      placeholder="请选择作用部位"
                      size="mini"
                    >
                      <el-option
                        v-for="item in dictList.ingredient_site_action"
                        :key="item.v"
                        :label="item.v"
                        :value="item.k"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="useWay" label="使用方法：">
                  <div class="item">
                    <el-select filterable 
                      style="width: 100%"
                      clearable
                      v-model="item.useWay"
                      placeholder="请选择使用方法"
                      size="mini"
                    >
                      <el-option
                        v-for="item in methodOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item prop="dosage" label="使用量(%)：">
                  <div class="item">
                    <el-input
                     @input="handleInput(item.dosage,'ingredientUseInfoList','dosage')"
                      type="number"
                      style="width: 100%; margin-top: 5px"
                      size="mini"
                      clearable
                      v-model="item.dosage"
                      placeholder="请输入使用量"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="1" style="text-align: center">
                <i
                  v-if="addEditForm.ingredientUseInfoList.length > 1"
                  @click="delRequestingredientUseInfo(index)"
                  class="el-icon-remove-outline"
                  style="
                    cursor: pointer;
                    font-size: 26px;
                    color: red;
                    font-weight: bold;
                    margin-top: 45px;
                  "
                ></i>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="23">
              <el-form-item label="备注：">
                <div class="item">
                  <el-input
                    type="textarea"
                    style="width: 100%"
                    :rows="5"
                    size="mini"
                    clearable
                    v-model="addEditForm.ingredientInformation.useInfoRemark"
                    placeholder="请输入备注"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <i
            @click="addRequestingredientUseInfo"
            class="el-icon-circle-plus-outline"
            style="
              cursor: pointer;
              font-size: 26px;
              color: #0099cc;
              font-weight: bold;
              margin-top: 10px;
              margin-bottom: 20px;
            "
          ></i>
        </div>
      </div>
      <div class="essential">
        <div class="essential-title">《化妆品安全技术规范》要求</div>
        <div style="margin-left: 20px">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="request" label="规范要求：">
                <div class="item">
                  <el-input
                    type="textarea"
                    style="width: 100%"
                    :rows="5"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.request.request"
                    placeholder="请输入规范要求"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            化妆品限用组分（表3）

            <div v-for="(item, index) in addEditForm.request3s" :key="index">
              <el-row>
                <el-col :span="6">
                  <el-form-item
                    prop="scopeOfUse"
                    label="适用及（或）使用范围："
                  >
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.scopeOfUse"
                        placeholder="请输入适用及（或）使用范围"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item
                    prop="maxAllowConcentration"
                    label="化妆品使用时的最大允许浓度："
                  >
                    <div class="item">
                         
                      <el-input
                      @input="handleInput(item.maxAllowConcentration,'request3s','maxAllowConcentration')"
                        type="number"
                        style="width: 100%; margin-top: 5px"
                        size="mini"
                        clearable
                        v-model.trim="item.maxAllowConcentration"
                        placeholder="请输入化妆品使用时的最大允许浓度"
                      >
                        <template slot="append">%</template>
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="otherRequest" label="其他限制和要求：">
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.otherRequest"
                        placeholder="请输入其他限制和要求"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    prop="requireNote"
                    label="标签上必须标印的使用条件和注意事项："
                  >
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.requireNote"
                        placeholder="标签上必须标印的使用条件和注意事项"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align: center">
                  <i
                    v-if="addEditForm.request3s.length > 1"
                    @click="delRequest3(index)"
                    class="el-icon-remove-outline"
                    style="
                      cursor: pointer;
                      font-size: 26px;
                      color: red;
                      font-weight: bold;
                      margin-top: 45px;
                    "
                  ></i>
                </el-col>
              </el-row>
            </div>
            <i
              @click="addRequest3"
              class="el-icon-circle-plus-outline"
              style="
                cursor: pointer;
                font-size: 26px;
                color: #0099cc;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 20px;
              "
            ></i>
          </div>
          <div>
            化妆品准用防腐剂（表4）

            <div v-for="(item, index) in addEditForm.request4s" :key="index">
              <el-row>
                <el-col :span="6">
                  <el-form-item
                    prop="maxAllowConcentration"
                    label="化妆品使用时的最大允许浓度："
                  >
                    <div class="item">
                      <el-input
                       @input="handleInput(item.maxAllowConcentration,'request4s','maxAllowConcentration')"
                        type="number"
                        style="width: 100%; margin-top: 5px"
                        size="mini"
                        clearable
                        v-model.trim="item.maxAllowConcentration"
                        placeholder="请输入化妆品使用时的最大允许浓度"
                      >
                        <template slot="append">%</template>
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="scopeOfUse" label="使用范围和限制条件：">
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.scopeOfUse"
                        placeholder="请输入使用范围和限制条件"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="5">
                  <el-form-item
                    prop="requireNote"
                    label="标签上必须标印的使用条件和注意事项："
                  >
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.requireNote"
                        placeholder="标签上必须标印的使用条件和注意事项"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align: center">
                  <i
                    v-if="addEditForm.request4s.length > 1"
                    @click="delRequest4(index)"
                    class="el-icon-remove-outline"
                    style="
                      cursor: pointer;
                      font-size: 26px;
                      color: red;
                      font-weight: bold;
                      margin-top: 45px;
                    "
                  ></i>
                </el-col>
              </el-row>
            </div>
            <i
              @click="addRequest4"
              class="el-icon-circle-plus-outline"
              style="
                cursor: pointer;
                font-size: 26px;
                color: #0099cc;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 20px;
              "
            ></i>
          </div>
          <div>
            化妆品准用防晒剂（表5）

            <div v-for="(item, index) in addEditForm.request5s" :key="index">
              <el-row>
                <el-col :span="6">
                  <el-form-item
                    prop="maxAllowConcentration"
                    label="化妆品使用时的最大允许浓度："
                  >
                    <div class="item">
                      <el-input
                        @input="handleInput(item.maxAllowConcentration,'request5s','maxAllowConcentration')"
                        type="number"
                        style="width: 100%; margin-top: 5px"
                        size="mini"
                        clearable
                        v-model.trim="item.maxAllowConcentration"
                        placeholder="请输入化妆品使用时的最大允许浓度"
                      >
                        <template slot="append">%</template>
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="scopeOfUse" label="使用范围和限制条件：">
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.scopeOfUse"
                        placeholder="请输入使用范围和限制条件"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>

                <el-col :span="5">
                  <el-form-item
                    prop="requireNote"
                    label="标签上必须标印的使用条件和注意事项："
                  >
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.requireNote"
                        placeholder="标签上必须标印的使用条件和注意事项"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align: center">
                  <i
                    v-if="addEditForm.request5s.length > 1"
                    @click="delRequest5(index)"
                    class="el-icon-remove-outline"
                    style="
                      cursor: pointer;
                      font-size: 26px;
                      color: red;
                      font-weight: bold;
                      margin-top: 45px;
                    "
                  ></i>
                </el-col>
              </el-row>
            </div>
            <i
              @click="addRequest5"
              class="el-icon-circle-plus-outline"
              style="
                cursor: pointer;
                font-size: 26px;
                color: #0099cc;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 20px;
              "
            ></i>
          </div>
          <div>
            化妆品准用染发剂（表7）

            <el-row>
              <el-col :span="6">
                <el-form-item
                  prop="yhxMaxAllowConcentration"
                  label="氧化型染发产品最大允许浓度："
                >
                  <div class="item">
                    <el-input
                     @input="handleInput2(addEditForm.request.yhxMaxAllowConcentration,'request','yhxMaxAllowConcentration')"
                      type="number"
                      style="width: 100%; margin-top: 5px"
                      size="mini"
                      clearable
                      v-model.trim="
                        addEditForm.request.yhxMaxAllowConcentration
                      "
                      placeholder="请输入氧化型染发产品最大允许浓度"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  prop="notYhxMaxAllowConcentration"
                  label="非氧化型染发产品最大允许浓度："
                >
                  <div class="item">
                    <el-input
                       @input="handleInput2(addEditForm.request.notYhxMaxAllowConcentration,'request','notYhxMaxAllowConcentration')"
                      type="number"
                      style="width: 100%; margin-top: 5px"
                      size="mini"
                      clearable
                      v-model.trim="
                        addEditForm.request.notYhxMaxAllowConcentration
                      "
                      placeholder="请输入非氧化型染发产品最大允许浓度"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="otherRequest" label="其他限制和要求：">
                  <div class="item">
                    <el-input
                      style="width: 100%"
                      size="mini"
                      clearable
                      v-model.trim="addEditForm.request.otherRequest"
                      placeholder="请输入其他限制和要求"
                    >
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  prop="requireNote"
                  label="标签上必须标印的使用条件和注意事项："
                >
                  <div class="item">
                    <el-input
                      style="width: 100%"
                      size="mini"
                      clearable
                      v-model.trim="addEditForm.request.requireNote"
                      placeholder="请输入标签上必须标印的使用条件和注意事项"
                    >
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div>
            其他禁用类别

            <el-row>
              <el-col :span="24">
                <el-form-item prop="otherDisabled" label="适用范围：">
                  <div class="item">
                    <el-input
                      style="width: 100%"
                      size="mini"
                      clearable
                      v-model.trim="addEditForm.request.otherDisabled"
                      placeholder="请输入适用范围"
                    >
                    </el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="essential">
        <div class="essential-title">权威机构评估结论</div>
        <div style="margin-left: 20px">
          <el-row>
            <el-col :span="6">
              <el-form-item prop="baseValue" label="通用（限值）：">
                <div class="item">
                  <el-input
                   @input="handleInput2(addEditForm.conclusion.baseValue,'conclusion','baseValue')"
                    type="number"
                    style="width: 100%; margin-top: 5px"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.conclusion.baseValue"
                    placeholder="请输入通用（限值）"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item prop="baseConclusion" label="通用结论：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.conclusion.baseConclusion"
                    placeholder="请输入通用结论"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item prop="zlValue" label="驻留类（限值）：">
                <div class="item">
                  <el-input
                   @input="handleInput2(addEditForm.conclusion.zlValue,'conclusion','zlValue')"
                    type="number"
                    style="width: 100%; margin-top: 5px"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.conclusion.zlValue"
                    placeholder="请输入驻留类（限值）"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item prop="zlConclusion" label="驻留类结论：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.conclusion.zlConclusion"
                    placeholder="请输入驻留类结论"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item prop="lxValue" label="淋洗类（限值）：">
                <div class="item">
                  <el-input
                    @input="handleInput2(addEditForm.conclusion.lxValue,'conclusion','lxValue')"
                    type="number"
                    style="width: 100%; margin-top: 5px"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.conclusion.lxValue"
                    placeholder="请输入淋洗类（限值）"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item prop="lxConclusion" label="淋洗类结论：">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.conclusion.lxConclusion"
                    placeholder="请输入淋洗类结论"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <div>文献</div>
            <div
              class="content-upload"
              v-for="(item, index) in addEditForm.conclusionAttachments"
              :key="index"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item prop="type" label="类型：">
                    <div class="item">
                      <el-select filterable 
                        style="width: 100%"
                        clearable
                        v-model="form.selectedOptions[index]"
                        placeholder="请选择类型"
                        size="mini"
                        @change="handleSelectChange(index)"
                        @clear="handleSelectClear(index)"
                      >
                        <el-option
                          :disabled="isOptionDisabled(item.value)"
                          v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="17">
                  <el-form-item prop="title" label="参考文献：">
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.title"
                        placeholder="请输入参考文献"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align: center">
                  <i
                    v-if="addEditForm.conclusionAttachments.length > 1"
                    @click="delRemove(index)"
                    class="el-icon-remove-outline"
                    style="
                      cursor: pointer;
                      font-size: 26px;
                      color: red;
                      font-weight: bold;
                      margin-top: 45px;
                    "
                  ></i>
                </el-col>
              </el-row>
            </div>
            <i
              @click="addConclusion"
              class="el-icon-circle-plus-outline"
              style="
                cursor: pointer;
                font-size: 26px;
                color: #0099cc;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 20px;
              "
            ></i>
            <div style="margin: 15px 0">上传文献</div>
            <el-form-item prop="url">
              <div class="item" style="position: relative">
                <el-upload
                  accept=".pdf"
                  :before-upload="beforeUpload"
                  :headers="postHead"
                  class="upload-demo"
                  :action="$uploadUrl + '/3'"
                  :on-success="handleSuccess"
                  :on-exceed="handleExceed"
                  :on-change="handleChange"
                  :file-list="addEditForm.attachments"
                  :show-file-list="false"
                >
                  <!-- <div style="color: #409eff" v-if="item.url">
                      {{ item.name }}<i 
                         @click.stop="deleteFlie(index)" class="el-icon-circle-close" style="font-size:20px;color:gray;cursor: pointer;margin-left:10px;    vertical-align: sub;"></i>
                      <div>点击替换上传</div>
                    </div> -->
                  <el-button size="small" type="primary">上传</el-button>
                </el-upload>
                <div
                  class="FileList"
                  v-for="(item, index) in addEditForm.attachments"
                  :key="index"
                >
                  <div>
                    <el-popover
                      placement="top-start"
                      title
                      width="200"
                      trigger="hover"
                      content="点击文件可以下载当前文件"
                    >
                      <i
                        class="el-icon-document"
                        slot="reference"
                        style="color: #55a8fd; cursor: pointer"
                      ></i>
                    </el-popover>
                    <span
                      style="
                        color: #55a8fd;
                        margin: 0 50px 0 10px;
                        font-size: 13px;
                      "
                    >
                      <a
                        style="color: #55a8fd"
                        :href="item.url"
                        target="_blank"
                        >{{ item.name }}</a
                      >
                    </span>
                    <i
                      class="el-icon-circle-close"
                      style="color: #55a8fd"
                      @click="deleteFile(index)"
                    ></i>
                    <el-button
                      @click="fileDowload(item)"
                      type="text"
                      style="margin-left: 10px"
                      >下载</el-button
                    >
                  </div>
                </div>
                <el-progress
                  v-if="showJinDuTao"
                  style="width: 200px; margin-top: 10px; margin-left: 35px"
                  :percentage="progressPercentExcel"
                />
                <div>仅能上传pdf文件，且不超过100M</div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="essential">
        <div class="essential-title">毒理学数据库</div>
        <div style="margin-left: 20px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="是否药食同源：">
                <div class="item">
                  <el-select filterable 
                    style="width: 200px"
                    clearable
                    v-model="addEditForm.toxicologyDbs.raw18"
                    placeholder="请选择是否药食同源"
                    size="mini"
                  >
                    <el-option
                      v-for="item in sameOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="概述：" prop="raw1">
                <div class="item">
                  <el-input
                    type="textarea"
                    style="width: 100%"
                    :rows="5"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw1"
                    placeholder="请输入概述"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="急性毒性："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
                prop="raw2"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw2"
                    placeholder="请输入急性毒性"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="眼刺激性：" prop="raw3">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw3"
                    placeholder="请输入眼刺激性"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="皮肤刺激性：" prop="raw4">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw4"
                    placeholder="请输入皮肤刺激性"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="皮肤变态反应（致敏性）：" prop="raw5">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw5"
                    placeholder="请输入皮肤变态反应（致敏性）"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="光毒性：" prop="raw6">
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw6"
                    placeholder="请输入光毒性"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="raw7"
                label="光变态反应："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw7"
                    placeholder="请输入光变态反应"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="raw8"
                label="遗传毒性："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw8"
                    placeholder="请输入遗传毒性"
                  >
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="重复剂量毒性："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
                prop="raw9"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw9"
                    placeholder="请输入重复剂量毒性"
                  >
                  </el-input>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <el-row v-if="addEditForm.toxicologyDbs.raw18 == 0">
            <el-col :span="7">
              <div>NOAEL(BMD)</div>
              <div>
                <el-form-item style="display: inline-block" prop="raw10">
                  <div class="item">
                    <el-select filterable 
                      style="width: 100px"
                      clearable
                      v-model="addEditForm.toxicologyDbs.raw10"
                      placeholder="请选择"
                      size="mini"
                    >
                      <el-option
                        v-for="item in NOAELOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item style="display: inline-block" prop="raw11">
                  <div class="item">
                    <el-input
                      type="number"
                     @input="handleInput2(addEditForm.toxicologyDbs.raw11,'toxicologyDbs','raw11')"
                      style="width: 240px"
                      size="mini"
                      clearable
                      v-model="addEditForm.toxicologyDbs.raw11"
                      placeholder="请输入"
                    >
                      <template slot="append">mg/kg bw/day</template>
                    </el-input>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7">
              <div>LOAEL</div>
              <div>
                <el-form-item style="display: inline-block" prop="raw12">
                  <div class="item">
                    <el-select filterable 
                      style="width: 100px"
                      clearable
                      v-model="addEditForm.toxicologyDbs.raw12"
                      placeholder="请选择"
                      size="mini"
                    >
                      <el-option
                        v-for="item in NOAELOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item style="display: inline-block" prop="raw13">
                  <div class="item">
                    <el-input
                      type="number"
                       @input="handleInput2(addEditForm.toxicologyDbs.raw13,'toxicologyDbs','raw13')"
                      style="width: 240px"
                      size="mini"
                      clearable
                      v-model="addEditForm.toxicologyDbs.raw13"
                      placeholder="请输入"
                    >
                      <template slot="append">mg/kg bw/day</template>
                    </el-input>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="raw14"
                label="生殖发育毒性："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw14"
                    placeholder="请输入生殖发育毒性"
                  >
                  </el-input>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="raw15"
                label="慢性毒性/致癌性："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw15"
                    placeholder="请输入慢性毒性/致癌性"
                  >
                  </el-input>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                prop="raw16"
                label="毒代动力学："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw16"
                    placeholder="请输入毒代动力学"
                  >
                  </el-input>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="人群安全资料："
                v-if="addEditForm.toxicologyDbs.raw18 == 0"
                prop="raw17"
              >
                <div class="item">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    clearable
                    v-model.trim="addEditForm.toxicologyDbs.raw17"
                    placeholder="请输入人群安全资料"
                  >
                  </el-input>
                </div>
              </el-form-item> </el-col
          ></el-row>
          <div>
            <div>文献</div>
            <div
              class="content-upload"
              v-for="(item, index) in addEditForm.toxicologyDocu"
              :key="index"
            >
              <el-row>
                <el-col :span="6">
                  <el-form-item prop="type" label="类型：">
                    <div class="item">
                      <el-select filterable 
                        style="width: 100%"
                        clearable
                        v-model="form1.selectedOptions[index]"
                        placeholder="请选择类型"
                        size="mini"
                        @change="handleSelectChange1(index)"
                        @clear="handleSelectClear1(index)"
                      >
                        <el-option
                          :disabled="isOptionDisabled1(item.k)"
                          v-for="item in dictList.toxicology_docu"
                          :key="item.v"
                          :label="item.v"
                          :value="item.k"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item prop="title" label="参考文献：">
                    <div class="item">
                      <el-input
                        style="width: 100%"
                        size="mini"
                        clearable
                        v-model.trim="item.title"
                        placeholder="请输入参考文献"
                      >
                      </el-input>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    prop="url"
                    label="上传文献（仅能上传pdf文件，且不超过100M，可上传多个）"
                  >
                    <div style="position: relative">
                      <el-upload
                        accept=".pdf"
                        :before-upload="beforeUpload"
                        :headers="postHead"
                        class="upload-demo"
                        :action="$uploadUrl + '/3'"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessToxicologyAttachments(
                              response,
                              file,
                              fileList,
                              index
                            );
                          }
                        "
                        :on-exceed="handleExceed"
                        :on-change="handleChange"
                        :file-list="item.toxicologyAttachments"
                        :show-file-list="false"
                      >
                        <el-button :disabled="form1.selectedOptions[index]==''||form1.selectedOptions[index]==null&&item.title==''&&item.type==''"  size="small" type="primary">上传</el-button>
                      </el-upload>
                      <div
                        class="FileList"
                        v-for="(
                          itemChild, indexChild
                        ) in item.toxicologyAttachments"
                        :key="indexChild"
                      >
                        <div>
                          <el-popover
                            placement="top-start"
                            title
                            width="200"
                            trigger="hover"
                            content="点击文件可以下载当前文件"
                          >
                            <i
                              class="el-icon-document"
                              slot="reference"
                              style="color: #55a8fd"
                            ></i>
                          </el-popover>
                          <span
                            style="
                              color: #55a8fd;
                              margin: 0 50px 0 10px;
                              font-size: 13px;
                            "
                          >
                            <a
                              style="color: #55a8fd"
                              :href="itemChild.url"
                              target="_blank"
                              >{{ itemChild.name }}</a
                            >
                          </span>
                          <i
                            class="el-icon-circle-close"
                            style="color: #55a8fd; cursor: pointer"
                            @click="
                              deleteFileToxicologyAttachments(indexChild, index)
                            "
                          ></i>
                          <el-button
                            @click="fileDowload(itemChild)"
                            type="text"
                            style="margin-left: 10px"
                            >下载</el-button
                          >
                        </div>
                      </div>
                      <el-progress
                        v-if="showJinDuTao"
                        style="
                          width: 200px;
                          margin-top: 10px;
                          margin-left: 35px;
                        "
                        :percentage="progressPercentExcel"
                      />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align: center">
                  <i
                    v-if="addEditForm.toxicologyDocu.length > 1"
                    @click="delRemoveToxicologyDocu(index)"
                    class="el-icon-remove-outline"
                    style="
                      cursor: pointer;
                      font-size: 26px;
                      color: red;
                      font-weight: bold;
                      margin-top: 45px;
                    "
                  ></i>
                </el-col>
              </el-row>
            </div>
            <i
              @click="addToxicologyDocu"
              class="el-icon-circle-plus-outline"
              style="
                cursor: pointer;
                font-size: 26px;
                color: #0099cc;
                font-weight: bold;
                margin-top: 10px;
                margin-bottom: 20px;
              "
            ></i>
          </div>
          <div class="btns">
            <el-button
              v-if="type == 'add' || type == 'edit'"
              v-clickForbidden
              size="mini"
              type="primary"
              @click="addEditSave"
              >确 定</el-button
            >
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      progressPercentExcel: 0, // 进度条默认为0
      showJinDuTao: false, //控制进度条显示隐藏
      type: "",
      disabled: false,
      id: "",
      postHead: { token: localStorage.token },
      addEditForm: {
        ingredientUseInfoList: [
          {
            position: "",
            useWay: "",
            dosage: "",
          },
        ],
        ingredientInformation: {
          useInfoRemark: "",
        },
        name: "",
        inci: "",
        ecWrap: [""],
        casWrap: [""],
        substances: [
          {
            value: "",
            remark: "",
          },
        ],
        effectWrap: [],
        suggestItem: "",
        disabled: "",
        num: "",
        lxMaxUseCount: "",
        zlMaxUseCount: "",
        remark: "",
        request3s: [
          {
            scopeOfUse: "",
            maxAllowConcentration: "",
            otherRequest: "",
            requireNote: "",
          },
        ],
        request4s: [
          {
            scopeOfUse: "",
            maxAllowConcentration: "",
            requireNote: "",
          },
        ],
        request5s: [
          {
            scopeOfUse: "",
            maxAllowConcentration: "",
            requireNote: "",
          },
        ],
        request: {
          request: "",
          yhxMaxAllowConcentration: "",
          notYhxMaxAllowConcentration: "",
          otherDisabled: "",
          otherRequest: "",
          requireNote: "",
        },
        conclusion: {
          baseValue: "",
          baseConclusion: "",
          zlValue: "",
          zlConclusion: "",
          lxValue: "",
          lxConclusion: "",
        },
        conclusionAttachments: [
          {
            type: "",
            title: "",
            moduleType: 1,
          },
        ],
        toxicologyDocu: [
          {
            type: "",
            title: "",
            moduleType: 2,
            toxicologyAttachments: [],
          },
        ],
        toxicologyDbs: {
          raw1: "",
          raw2: "",
          raw3: "",
          raw4: "",
          raw5: "",
          raw6: "",
          raw7: "",
          raw8: "",
          raw9: "",
          raw10: "",
          raw11: "",
          raw12: "",
          raw13: "",
          raw14: "",
          raw15: "",
          raw16: "",
          raw17: "",
          raw18: "0",
        },
        attachments: [],
      },

      NOAELOptions: [
        { value: "28", label: "28天" },
        { value: "90", label: "90天" },
      ],
      LOAELOptions: [
        { value: "28", label: "28天" },
        { value: "90", label: "90天" },
      ],
      sameOptions: [
        { value: "0", label: "否" },
        { value: "1", label: "是" },
      ],
      typeOptions: [
        { value: "0", label: "通用" },
        { value: "1", label: "驻留类" },
        { value: "2", label: "淋洗类" },
      ],
      methodOptions: [
        { value: 1, label: "驻留类" },
        { value: 2, label: "淋洗类" },
      ],
      disabledOptions: [
        { value: "0", label: "否" },
        { value: "1", label: "是" },
      ],
      addEditRules: {
        name: [
          { required: true, message: "中文名称不能为空", trigger: "blur" },
        ],

        disabled: [
          {
            required: true,
            message: "请选择是否为化妆品禁用组分",
            trigger: "blur",
          },
        ],
      },
      form: {
        selectedOptions: [null],
        disabledOptions: [], // 禁用的选项集合
      },
      form1: {
        selectedOptions: [null],
        disabledOptions: [], // 禁用的选项集合
      },
    };
  },
  computed: {
    ...mapGetters(["dictList"]),
  },
  methods: {
    // 下拉框选择事件
    handleSelectChange(index) {
      this.form.disabledOptions = [];
      for (let i = 0; i < this.form.selectedOptions.length; i++) {
        if (this.form.selectedOptions[i] !== null) {
          this.form.disabledOptions.push(this.form.selectedOptions[i]);
        }
      }
    },
    // 下拉框清除事件
    handleSelectClear(index) {
      const clearedValue = this.form.selectedOptions[index];
      const indexToRemove = this.form.disabledOptions.indexOf(clearedValue);
      if (indexToRemove !== -1) {
        this.form.disabledOptions.splice(indexToRemove, 1);
      }
    },
    // 下拉框选择事件
    handleSelectChange1(index) {
      this.form1.disabledOptions = [];
      for (let i = 0; i < this.form1.selectedOptions.length; i++) {
        if (this.form1.selectedOptions[i] !== null) {
          this.form1.disabledOptions.push(this.form1.selectedOptions[i]);
        }
      }
    },
    // 下拉框清除事件
    handleSelectClear1(index) {
      const clearedValue = this.form1.selectedOptions[index];
      const indexToRemove = this.form1.disabledOptions.indexOf(clearedValue);
      if (indexToRemove !== -1) {
        this.form1.disabledOptions.splice(indexToRemove, 1);
      }
    },
    //是否禁用
    isOptionDisabled(value) {
      return this.form.disabledOptions.includes(value);
    },
    //是否禁用
    isOptionDisabled1(value) {
      return this.form1.disabledOptions.includes(value);
    },
    

    handleChange(file, fileList) {
      if (this.showJinDuTao) {
        if (file.status === "ready") {
          this.progressPercentExcel = 0;
          this.showJinDuTao = true;
          const interval = setInterval(() => {
            if (this.progressPercentExcel >= 99) {
              clearInterval(interval);
              return;
            }
            this.progressPercentExcel += 1;
          }, 100);
        }
        if (file.status === "success") {
          this.progressPercentExcel = 100;
          setTimeout(() => {
            this.showJinDuTao = false;
          }, 1000);
        }
        if (file.status === "fail") {
          setTimeout(() => {
            this.progressPercentExcel = 0;
            this.showJinDuTao = false;
          }, 1000);
        }
      }
    },
    deleteEcWrap(index) {
      this.addEditForm.ecWrap.splice(index, 1);
    },
    deleteFlie(index) {
      this.addEditForm.conclusionAttachments[index].name = "";
      this.addEditForm.conclusionAttachments[index].url = "";
    },
    deleteCasWrap(index) {
      this.addEditForm.casWrap.splice(index, 1);
    },
    addEditSave() {
      var done = false;
      if (
        this.addEditForm.toxicologyDbs.raw10 ||
        this.addEditForm.toxicologyDbs.raw11
      ) {
        if (!this.addEditForm.toxicologyDbs.raw10) {
          done = true;
          this.$message.warning("请选择NOAEL中的天数");
        } else if (!this.addEditForm.toxicologyDbs.raw11) {
          done = true;
          this.$message.warning("请输入NOAEL值 ");
        }
      }
      if (
        this.addEditForm.toxicologyDbs.raw12 ||
        this.addEditForm.toxicologyDbs.raw13
      ) {
        if (!this.addEditForm.toxicologyDbs.raw12) {
          done = true;
          this.$message.warning("请选择LOAEL中的天数");
        } else if (!this.addEditForm.toxicologyDbs.raw13) {
          done = true;
          this.$message.warning("请输入LOAEL值 ");
        }
      }

      this.addEditForm.ingredientUseInfoList.forEach((item) => {
        if (item.position != "" || item.useWay != "" || item.dosage != "") {
          if (item.position == "" || item.useWay == "" || item.dosage == "") {
            done = true;
            this.$message.warning("请检查已上市产品原料使用信息不能为空");
          }
        }
      });

      // this.form.selectedOptions=this.form.selectedOptions.filter(item=>item!=null)
      this.form.selectedOptions.forEach((item, index) => {
        this.addEditForm.conclusionAttachments[index].type = item;
      });
      
      this.addEditForm.conclusionAttachments.forEach((item,index) => {
        if(item.type==''&&item.title==''){
          this.addEditForm.conclusionAttachments.splice(index, 1);
        }
         if (
        item.type ||
        item.title
      ) {
        if (!item.type) {
          done = true;
          this.$message.warning("请填写权威机构评估结论中类型");
        } else if (!item.title) {
          done = true;
          this.$message.warning("请填写权威机构评估结论中参考文献 ");
        }
      }
      });
      // this.form1.selectedOptions=this.form1.selectedOptions.filter(item=>item!=null)
      this.form1.selectedOptions.forEach((item, index) => {
        this.addEditForm.toxicologyDocu[index].type = item;
      });
      this.addEditForm.toxicologyDocu.forEach((item,index) => {
          if(item.type==''&&item.title==''){
          this.addEditForm.toxicologyDocu.splice(index, 1);
        }
         if (
        item.type ||
        item.title
      ) {
        if (!item.type) {
          done = true;
          this.$message.warning("请填写毒理学数据库中类型");
        } else if (!item.title) {
          done = true;
          this.$message.warning("请填写毒理学数据库中参考文献 ");
        }
      }
      });

      if (!done) {
          //写这里是因为数据提交的时候转换了 防止报错的时候导致数据错误
           let newData = {};
        for (let key in this.addEditForm.toxicologyDbs) {
          let target = "raw";
          newData[key.replace(target, "")] = this.addEditForm.toxicologyDbs[key];
        }
        this.addEditForm.toxicologyDbs = newData;
        this.addEditForm.attachments = JSON.parse(
          JSON.stringify(this.addEditForm.attachments).replace(/name/g, "title")
        );
        this.addEditForm.toxicologyDocu.forEach((item) => {
          item.toxicologyAttachments = JSON.parse(
            JSON.stringify(item.toxicologyAttachments).replace(/name/g, "title")
          );
        });
          this.$refs.addEditFormRef.validate(async (boolean) => {
            if (boolean) {
              let data = {
                id: this.id,
                ...this.addEditForm,
              };
              if (this.type == "add") {
                data.id = "";
                await this.$api.addRawman(data).then((res) => {
                  if (res.data.code == "00000") {
                    this.$message.success("新增成功");
                    this.$router.go(-1);
                  }
                }).catch(() => {
                //报错的话 就重组数据
                     let newData = {};
            for (let key in this.addEditForm.toxicologyDbs) {
              newData["raw" + key] = this.addEditForm.toxicologyDbs[key];
            }
            this.addEditForm.toxicologyDbs = newData;
            this.addEditForm.attachments = JSON.parse(
            JSON.stringify(this.addEditForm.attachments).replace(
              /title/g,
              "name"
            )
          );
          this.addEditForm.toxicologyDocu.forEach((item) => {
            if (item.toxicologyAttachments != null) {
              item.toxicologyAttachments = JSON.parse(
                JSON.stringify(item.toxicologyAttachments).replace(
                  /title/g,
                  "name"
                )
              );
            } else {
              item.toxicologyAttachments = [];
            }
          });
                });
              } else {
                await this.$api.editRawman(data).then((res) => {
                  if (res.data.code == "00000") {
                    this.$message.success("编辑成功");
                    this.$router.go(-1);
                  }
                }).catch(() => {
                    //报错的话 就重组数据
                       let newData = {};
            for (let key in this.addEditForm.toxicologyDbs) {
              newData["raw" + key] = this.addEditForm.toxicologyDbs[key];
            }
            this.addEditForm.toxicologyDbs = newData;
            this.addEditForm.attachments = JSON.parse(
            JSON.stringify(this.addEditForm.attachments).replace(
              /title/g,
              "name"
            )
          );
          this.addEditForm.toxicologyDocu.forEach((item) => {
            if (item.toxicologyAttachments != null) {
              item.toxicologyAttachments = JSON.parse(
                JSON.stringify(item.toxicologyAttachments).replace(
                  /title/g,
                  "name"
                )
              );
            } else {
              item.toxicologyAttachments = [];
            }
          });
                });
              }
            }
          });
      }
    },
    handleSuccess(file, fileList) {
      this.addEditForm.attachments.push({
        name: file.result.filename,
        url: file.result.filePath,
        type: 1,
      });
    },
    handleSuccessToxicologyAttachments(response, file, fileList, index) {
      this.addEditForm.toxicologyDocu[index].toxicologyAttachments.push({
        name: file.response.result.filename,
        url: file.response.result.filePath,
        type: 2,
      });
    },

    handleExceed(files, fileList) {
      this.$message.warning("只能上传一个附件");
    },
    fileDowload(item) {
      const fileUrl = `https:` + item.url; // 文件的URL地址
      const link = document.createElement("a");
      link.href = fileUrl;
      link.setAttribute("download", item.name);
      link.click();
      this.$message.success("请稍等,正在下载");
    },
    deleteFile(index) {
      this.addEditForm.attachments.splice(index, 1);
      this.$emit("sendFiles", this.addEditForm.attachments);
    },
    deleteFileToxicologyAttachments(indexChild, index) {
      this.addEditForm.toxicologyDocu[index].toxicologyAttachments.splice(
        indexChild,
        1
      );
      this.$emit(
        "sendFiles",
        this.addEditForm.toxicologyDocu[index].toxicologyAttachments
      );
    },

    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "pdf";
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!extension) {
        this.$message.error("上传文件只能是pdf格式!");
        file = false;
        return file;
      }
      if (!isLt100M) {
        this.$message.error("上传文件大小不能超过 100MB!");
        file = false;
        return file;
      }
      this.$message.warning("上传中,请稍等");
      this.showJinDuTao = true;
    },
    addRequest5() {
      this.addEditForm.request5s.push({
        scopeOfUse: "",
        maxAllowConcentration: "",
        requireNote: "",
      });
    },
    addConclusion() {
      this.addEditForm.conclusionAttachments.push({
        type: "",
        title: "",
        url: "",
        name: "",
        moduleType: 1,
      });
    },
    addToxicologyDocu() {
      this.addEditForm.toxicologyDocu.push({
        type: "",
        title: "",
        url: "",
        name: "",
        moduleType: 2,
        toxicologyAttachments: [],
      });
    },
    delRemove(index) {
      this.form.selectedOptions.splice(index, 1);
      this.addEditForm.conclusionAttachments.splice(index, 1);
      this.form.disabledOptions.splice(index, 1);
    },
    delRemoveToxicologyDocu(index) {
      this.form1.selectedOptions.splice(index, 1);
      this.addEditForm.toxicologyDocu.splice(index, 1);
      this.form1.disabledOptions.splice(index, 1);
    },
    delRequest5(index) {
      this.addEditForm.request5s.splice(index, 1);
    },
    delRequestingredientUseInfo(index) {
      this.addEditForm.ingredientUseInfoList.splice(index, 1);
    },
    addRequest3() {
      this.addEditForm.request3s.push({
        scopeOfUse: "",
        maxAllowConcentration: "",
        otherRequest: "",
        requireNote: "",
      });
    },
    addRequestingredientUseInfo() {
      this.addEditForm.ingredientUseInfoList.push({
        useWay: "",
        dosage: "",
        position: "",
      });
    },
    addRequest4() {
      this.addEditForm.request4s.push({
        scopeOfUse: "",
        maxAllowConcentration: "",
        requireNote: "",
      });
    },
    delRequest4(index) {
      this.addEditForm.request4s.splice(index, 1);
    },
    delRequest3(index) {
      this.addEditForm.request3s.splice(index, 1);
    },
    delFx(index) {
      this.addEditForm.substances.splice(index, 1);
    },
    addFx() {
      this.addEditForm.substances.push({ value: "", remark: "" });
    },
    addEc() {
      this.addEditForm.ecWrap.push("");
    },
    addCas() {
      this.addEditForm.casWrap.push("");
    },
    getRawmanDetail() {
      this.$api.rawmanDetail(this.id).then((res) => {
        if (res.data.code == "00000") {
          this.addEditForm = res.data.result;

          this.addEditForm.attachments = JSON.parse(
            JSON.stringify(this.addEditForm.attachments).replace(
              /title/g,
              "name"
            )
          );
          this.addEditForm.toxicologyDocu.forEach((item) => {
            if (item.toxicologyAttachments != null) {
              item.toxicologyAttachments = JSON.parse(
                JSON.stringify(item.toxicologyAttachments).replace(
                  /title/g,
                  "name"
                )
              );
            } else {
              item.toxicologyAttachments = [];
            }
          });
          this.addEditForm.effectWrap = this.addEditForm.effectWrap.map(Number);
          this.addEditForm.disabled = this.addEditForm.disabled.toString();
          if (this.addEditForm.ingredientInformation == null) {
            this.addEditForm.ingredientInformation = {
              useInfoRemark: "",
            };
          }
          if (this.addEditForm.conclusionAttachments == null||this.addEditForm.conclusionAttachments.length==0) {
     
            this.addEditForm.conclusionAttachments = [
              {
                type: "",
                title: "",
                url: "",
                name: "",
                moduleType: 1,
              },
            ];
          } else {
            this.addEditForm.conclusionAttachments.forEach((item) => {

              item.type = item.type.toString();
            });
           
          }
           if (this.addEditForm.toxicologyDocu == null||this.addEditForm.toxicologyDocu.length==0) {
              this.addEditForm.toxicologyDocu = [
                {
                  type: "",
                  title: "",
                  url: "",
                  name: "",
                  moduleType: 2,
                   toxicologyAttachments: [],
                },
              ];
            }

            let newData = {};
            for (let key in this.addEditForm.toxicologyDbs) {
              newData["raw" + key] = this.addEditForm.toxicologyDbs[key];
            }
            this.addEditForm.toxicologyDbs = newData;
          this.form1.selectedOptions = [];
          this.addEditForm.toxicologyDocu.forEach((item, index) => {
            this.form1.selectedOptions.push(item.type);
            this.form1.disabledOptions.push(item.type);
          });
          this.form.selectedOptions = [];
          this.addEditForm.conclusionAttachments.forEach((item, index) => {
            this.form.selectedOptions.push(item.type);
            this.form.disabledOptions.push(item.type);
          });
        }
      });
    },
    handleInput(value,name,name2) {
        // 使用正则表达式限制为最多十位小数
      const regex = /^(\d+)?(\.\d{1,10})?$/;
      // 如果输入值不符合正则表达式，则将其重置为上一次的合法值
      if (!regex.test(value)) {
        this.addEditForm[name].forEach((item) => {
          item[name2] = item[name2].toString().substring(0, value.length - 1);
        });
      }
    },
        handleInput2(value,name,name1) {
        // 使用正则表达式限制为最多十位小数
      const regex = /^(\d+)?(\.\d{1,10})?$/;
      // 如果输入值不符合正则表达式，则将其重置为上一次的合法值
      if (!regex.test(value)) {
      
         this.addEditForm[name][name1] = this.addEditForm[name][name1].toString().substring(0, value.length - 1);
    
      }
    },
    handleInput1(value,name,name1){
       // 使用正则表达式限制为最多十位小数
      const regex = /^(\d+)?(\.\d{1,10})?$/;
      // 如果输入值不符合正则表达式，则将其重置为上一次的合法值
      if (!regex.test(value)) {
   
       return this[name][name1] = this[name][name1].toString().substring(0, value.length - 1);
      }
    },
  },
  created() {
    this.type = this.$route.query.type;
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getRawmanDetail();
    }
    if (this.$route.query.type == "view") {
      this.disabled = true;
    }

    //   let newData = {};
    // for (let key in this.addEditForm.toxicologyDbs) {
    // 	newData['raw'+ key ] = this.addEditForm.toxicologyDbs[key ];
    // }
    // console.log(newData);
  },
};
</script>
<style lang="less" scoped>
.accountList {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  .content-upload {
    background-color: #efefef;
    padding: 20px;
    margin-top: 20px;
  }
  .essential {
    margin-bottom: 20px;
    .essential-title {
      font-size: 18px;
      margin-bottom: 20px;
      padding-left: 5px;
      border-left: 5px solid #3783f2;
    }
  }
  .el-row {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      margin-bottom: 10px;
    }
    .item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .nameSpan {
        padding-right: 10px;
        box-sizing: border-box;
        white-space: nowrap;
      }
      .el-input {
        width: 162px;
      }
    }
  }
}
/deep/.el-form-item__label {
  float: none;
}
/deep/.el-upload-list {
  width: 40% !important;
}
</style>
